<!-- 消息 -->
<script setup lang="ts">
// 时间模拟
const nowTime = new Date().toLocaleDateString();
// 徽标模拟
const Bage = ref(5);
const goMessageNotice = () => {
  uni.navigateTo({ url: "/pages/notice/workPage/messageNotice" });
};
const goSystemNotice = () => {
  uni.navigateTo({ url: "/pages/DoctorConsultationRoom/index" });
};
</script>

<template>
  <view class="work" w-full h-100vh bg-white>
    <header
      w-full
      h-88rpx
      flex
      justify-between
      flex-items-center
      px3
      style="box-sizing: border-box"
    >
      <h4>消息</h4>
      <div>
        <img src="/src/static/xpc.png" alt="" w-40rpx h-40rpx style="vertical-align: middle" />
        <span style="color: #c3c3c5" font-size-24rpx @click="Bage = 0">清除未读</span>
      </div>
    </header>
    <main>
      <wd-cell-group border>
        <!-- 交易消息 -->
        <wd-cell :value="nowTime" clickable @click="goMessageNotice">
          <template #title>
            <view flex>
              <wd-badge :modelValue="Bage === 0 ? '' : Bage">
                <img src="/src/static/zhqImg/doctorHead@1x.png" alt="" w-90rpx h-90rpx />
              </wd-badge>
              <view ml-5>
                交易消息
                <wd-text
                  text="您刚刚支付了问诊咨询服务，可随时与医生进行在线沟通。"
                  :lines="1"
                  size="24rpx"
                />
              </view>
            </view>
          </template>
        </wd-cell>

        <!-- 系统通知 -->
        <wd-cell :value="nowTime" clickable @click="goSystemNotice">
          <template #title>
            <view flex>
              <wd-badge :modelValue="Bage === 0 ? '' : Bage">
                <img src="/src/static/zhqImg/doctorHead@1x.png" alt="" w-90rpx h-90rpx />
              </wd-badge>
              <view ml-5>
                系统通知
                <wd-text
                  text="5元问诊优惠券已到账，您可进入【我的-优惠券】查看并使用"
                  :lines="1"
                  size="24rpx"
                />
              </view>
            </view>
          </template>
        </wd-cell>
      </wd-cell-group>
    </main>
  </view>
</template>

<style lang="scss" scoped></style>
